<template>
    <a-modal centered :width="640" title="修改密码" :visible="modifyEntity.showUpdatePwd" @cancel="handleRefresh">
        <!--保存按钮-->
        <template slot="footer">
            <a-row>
                <a-col :span="24">
                    <a-button icon="close-circle" @click="handleRefresh">取消</a-button>
                    <a-divider type="vertical" />
                    <a-button icon="check-circle" :loading="loading" @click="handleSubmit">保存</a-button>
                </a-col>
            </a-row>
        </template>

        <a-form :form="form" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-row>
                <a-col :lg="24" :md="24" :sm="24">
                    <a-form-item label="密码">
                        <a-input-password v-decorator="[
                            'pwd',
                            { rules: [{ required: true, message: '请输入密码' }] },
                        ]" placeholder="请输入密码" />
                    </a-form-item>
                </a-col>
                <a-col :lg="24" :md="24" :sm="24">
                    <a-form-item label="二次密码">
                        <a-input-password v-decorator="[
                            'passwordConfirm',
                            { rules: [{ required: true, message: '请输入二次密码' }] },
                        ]" placeholder="请输入二次密码" />
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </a-modal>
</template>

<script>
import md5 from "md5";
import { updatePwd } from "./admin";
export default {
    props: {
        modifyEntity: {
            type: Object,
            required: true,
            default: function () {
                return {
                    // 传递的主键
                    id: "",
                    // 页面操作类型
                    operation: this.operationFlag.Add,
                    // 是否展示编辑页面
                    showUpdatePwd: false,
                };
            },
        },
    },
    data() {
        return {
            // 显示描述宽度
            labelCol: { md: { span: 6 }, xs: { span: 24 }, sm: { span: 12 } },
            // 输入框宽度
            wrapperCol: { md: { span: 16 }, xs: { span: 24 }, sm: { span: 12 } },
            // 按钮加载状态
            loading: false,
            form: this.$form.createForm(this),
            entity: {
                pwd: '',
                passwordConfirm: '',
            },
        };
    },
    methods: {
        //#region 保存
        // 保存
        handleSubmit() {
            let that = this;
            this.form.validateFields((errors, values) => {
                if (!errors) {
                    that.entity = Object.assign(
                        that.entity,
                        that.form.getFieldsValue()
                    );
                    that.entity.pwd = md5(values.pwd);
                    that.entity.passwordConfirm = md5(values.passwordConfirm);
                    that.entity.id = that.modifyEntity.id;
                    updatePwd(that.entity)
                        .then((res) => {
                            that.submitResult(res);
                        })
                        .catch((error) => {
                        });
                }
            });
        },
        // 保存结果
        submitResult(res) {
            if (res.code == 200) {
                this.$notification.success({ description: res.msg });
                this.$emit("handleRefresh");
            } else {
                this.$notification.error({ description: res.msg });
            }
        },
        //#endregion

        //#region  取消、关闭、重置
        // 取消、关闭
        handleRefresh() {
            this.$emit("handleRefresh");
        },
        // 重置
        handleReset() {
            this.loadData();
        },
        //#endregion
    },
};
</script>